import React, { useCallback, useRef } from "react";
import styles from "./index.module.scss";
import ZupFileDrag from "@/components/ZupFileDrag";
import { Button } from "antd";

const data = [
  {
    createTime: "2023-04-17 17:26:21",
    creatorId: null,
    creatorName: "",
    fileName: "20200421143251_hrpic.jpg",
    filePath: "/goods/1681723389389/img/20230417_17262140137.jpg",
    id: 192,
    isFrame: null,
    moduleName: "goods",
    type: "img",
    updateTime: "2023-04-17 17:26:21",
  },
  {
    createTime: "2023-07-11 11:27:47",
    creatorId: null,
    creatorName: "",
    fileName: "1.jpg",
    filePath: "/goods/1681723389389/img/20230711_11274732960.jpg",
    id: 387,
    isFrame: null,
    moduleName: "goods",
    type: "img",
    updateTime: "2023-07-11 11:27:47",
  },
  {
    createTime: "2023-07-11 11:27:47",
    creatorId: null,
    creatorName: "",
    fileName: "999999999999999.jpg",
    filePath: "/goods/1681723389389/img/20230711_11274732960.jpg",
    id: 311,
    isFrame: null,
    moduleName: "goods",
    type: "img",
    updateTime: "2023-07-11 11:27:47",
  },
];

function A4UpFile() {
  const fileRef = useRef<any>(null);

  // 点击确定
  const clickOkFu = useCallback(() => {
    if (fileRef.current) {
      const ids = fileRef.current.clickOkFu();
      console.log("拿到子组件的文件ids", ids);
    }
  }, []);

  return (
    <div className={styles.A4UpFile}>
      <div className="A4UpFileBox">
        <ZupFileDrag
          ref={fileRef}
          fileData={data}
          myUrl="https://ytxbwg.4dage.com/api/cms/goods/upload"
          // 暂时写死类型，后面对接口的时候 可能需要删掉 这个字段。通过name来判断属性
          fromData={{ type: "img", dirCode: "文件code码" }}
        />
        <br />
        <br />
        <Button onClick={clickOkFu}>确定</Button>
      </div>
    </div>
  );
}

const MemoA4UpFile = React.memo(A4UpFile);

export default MemoA4UpFile;
